<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>许愿墙</title>
<script src="./Public/jquery.11.min.js"></script>
<script src="./Public/bt/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./Public/bt/css/bootstrap.min.css"/>
<script type="text/javascript">
	
</script>
<style>
/*框架预览 CSS*/
.mkeBody{ background:#121212;}
.mkeHeadBox{ padding: 30px 10px; text-overflow: ellipsis; white-space: nowrap; margin: 0; color: #fff; text-align: center; overflow: hidden; border-bottom: 3px solid #666; box-shadow: inset 0 -2px 3px #000000; letter-spacing: 1px; font: 26px/26px "微软雅黑"; }
.mkeFooterBox{ padding: 25px 10px; text-overflow: ellipsis; margin: 0; color: #fff; font-size: 14px; line-height: 24px; text-align: center; overflow: hidden; border-top: 3px solid #666; box-shadow: inset 0 2px 3px #000000; }
.mkeContentBox{ background:#EFEFEF; padding:50px 0 0 0}
.mkeContentBox:after{height:0; clear:both;}
.mkeFooterBox p,.mkeFooterBox div{padding:0; margin:0; line-height:26px; font-size:14px;}
.mkeFooterBox a{color:#fff; white-space:nowrap}
.mkeButton{background:#F36; display:inline-block; text-decoration:none; width:102px; border-radius:0.3em; transition:all 0.3s ease}
.mkeButton:hover{ background: #FF1550; }
.mkeURL{font-size:24px;}
.mkeFooterBox .mKeBannerAD{ width: 728px; height: 90px; margin: 18px auto 0; }
.mkeFooterBox .mSmallKeBannerAD{display:none;}
@media only screen and (max-width:900px){
.mkeButton {display:block; margin:8px auto 0;}
}
@media only screen and (max-width:767px){
.mkeHeadBox{font-size:18px; padding:15px 10px;}
.mkeFooterBox p,.mkeFooterBox div{ line-height:24px; font-size:12px;}
.mkeURL{font-size:22px;}
.mkeFooterBox .mKeBannerAD{display:none;}
.mkeFooterBox .mSmallKeBannerAD{width:300px; height:250px; margin:18px auto 0; display:block;}
}
/*End*/

/*主要CSS*/
body { background-color: #EFEFEF; }
.lanren { width: 1000px; overflow: hidden; margin: 0 auto; }
.flip-3d { perspective: 1200px; width: 33%; float: left; }
.flip-3d figure { position: relative; transform-style: preserve-3d; transition: 1s transform; font-size: 1.6rem; margin: 25px; }
.flip-3d figure img { width: 100%; height: auto; }
.flip-3d figure figcaption { position: absolute; width: 100%; height: 154px; top: 0;  transform: rotateY(.5turn) translateZ(1px);
background: rgba(255,255,255,0.9); text-align: center; padding-top: 45%; opacity: 0.6; transition: 1s .5s opacity; }
.flip-3d:hover figure { transform: rotateY(.5turn);
}
.flip-3d:hover figure figcaption { opacity: 1; }
.flip-3d figure:after { content: " "; display: block; height: 8vw; width: 100%; transform: rotateX(90deg); background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); }
@media screen and (max-width: 800px) {
#flip-3d { perspective-origin: center top; }
div#flip-3d figure { float: none; width: 50%; margin: 0 auto; margin-bottom: 12vw; }
.flip-3d figure figcaption { font-size: 0.8rem; }
div#flip-3d figure:last-child { display: none; }
}
</style>
</head>
<body class="mkeBody">
	<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  发表留言
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">许愿</h4>
      </div>
      <div class="modal-body">
    <form action="javascript:;" method="post">
        <div class="form-group">
            <label for="exampleInputEmail1">标题</label>
            <input type="text" class="form-control" id="exampleInputEmail1" name="title">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">作者</label>
            <input type="text" class="form-control" id="exampleInputEmail1" name="title">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">内容</label>
            <textarea name="content" id="" cols="30" rows="10" class="form-control"></textarea>
        </div>
    </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div class="mkeHeadBox">许愿墙</div>
<div class="mkeContentBox">
<!--效果html开始-->
<div class="lanren">
  <div class="flip-3d">
    <figure> <img src="Public/images/1.jpg">
      <figcaption>Mouse</figcaption>
        <?php foreach($data as $k => $v): ?>
        <tr>
            <td><?php echo $k ?></td>
            <td><?php echo $v['title'] ?></td>
            <td><?php echo $v['content'] ?></td>
            <td>
                <a href="" class="btn btn-success">编辑</a><a href="" class="btn btn-danger">删除</a>
            </td>
        </tr>
        <?php endforeach ?>
    </figure>
  </div>
  <div class="flip-3d">
    <figure> <img src="Public/images/1.jpg">
      <figcaption>Irrigation rats</figcaption>
    </figure>
  </div>
  <div class="flip-3d">
    <figure> <img src="Public/images/1.jpg">
      <figcaption>Rabbit</figcaption>
    </figure>
  </div>
</div>
<!--效果html结束-->
</div>
<!--<div class="mkeFooterBox">
<p>特效转自【科e整理】。
</div>-->
</body>
</html>